<template>
    <basic-container>
        <avue-crud
                :data="tableData"
                :page="{total,pageNum,pageSize}"
                :option="option"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @search-change="handleSearchChange"
                @search-reset="handleResetChange"
        ></avue-crud>
    </basic-container>
</template>

<script>
    import {mapActions, mapGetters} from "vuex";
    export default {
        name: "userInfo",
        data(){
            return{
                option:{
                    stripe:true,
                    excelBtn: true,
                    border: true,
                    align: 'center',
                    searchMenuSpan:8,
                    searchIndex:3,
                    searchIcon:true,  
                    addBtn: true,
                    editBtn: true,
                    delBtn: true,
                    index:true,
                    column:[{
                        label: '用户名',
                        prop: 'userName',
                        search: true,
                        rules:[{
                            required: true,
                            message: "用户名必填",
                            trigger: "blur"
                        }]
                    },{
                        label: '密码',
                        prop: 'password',
                        search: false,
                        type:'password',
                        hide: true,
                        rules:[{
                            required: true,
                            message: "密码必填",
                            trigger: "blur"
                        }]
                    },{
                        label: '手机号',
                        prop: 'phoneNumber',
                        search: true,
                        rules:[{
                            required: true,
                            message: "手机号必填",
                            trigger: "blur"
                        }]
                    },{
                        label: '头像',
                        prop: 'avatarAddress',
                        type: 'upload',
                        span:24,
                        limit:1,
                        listType: 'picture-img',
                        loadText: '附件上传中，请稍等',
                        accept: 'image/png, image/jpeg',
                        tip: '只能上传jpg/png文件',
                        action: '/admin/version/uploadIcon',
                        rules:[{
                            required: true,
                            message: "头像必填",
                            trigger: "blur"
                        }]
                    },{
                        label: '锁定状态',
                        prop: 'lockedStatus',
                        search: true,                    
                        type: 'select',
                        addDisplay: false,
                        editDisplay: false,
                        dicData: [{
                            label: '未锁定',
                            value: '0'
                        }, {
                            label: '已锁定',
                            value: '1'
                        }]              
                    },{
                        label: '创建人',
                        prop: 'createdUser',
                        addDisplay: false,
                        editDisplay: false
                    },{
                        label: '创建时间',
                        prop: 'createdTime',
                        searchSpan: 8,
                        searchRange: true,
                        search: true,
                        addDisplay: false,
                        editDisplay: false
                    }]
                }
            }
        },
        methods:{
            handleSearchChange(params, done){
                this.searchChange(params);
                done();
            },
            ...mapActions("userInfo",{
                queryData:"initQuery",
                searchChange:"handleSearchChange",
                handleSizeChange:"handleSizeChange",
                handleCurrentChange:"handleCurrentChange",
                handleResetChange:"handleResetChange"
            })
        },
        computed:{
            ...mapGetters("userInfo",{
                tableData: 'getData',
                total:'getTotal',
                pageNum:'getPageNum',
                pageSize:'getPageSize'
            })
        },
        mounted() {
            this.queryData();
        }
    }
</script>

<style scoped>

</style>